
import React from 'react'

import * as SysUserAction  from '../../actions/SysUserAction';
import { connect }  from 'react-redux';

class UnitSettingAddSysUser extends React.Component {
  constructor(props) {
    super(props)

  }

  componentDidMount() {
    this.props.dispatch(
      SysUserAction.loadSysUserDataByPropertyAsync({sysuser: this.props.sysuser})
    )
  }

  componentWillReceiveProps(props) {
    this.setState({
      data: props.data
    })
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data && this.props.data.length > 0) {
      this.props.data.forEach(function(data, index) {
        content.push((
          <tr>
            <td>
              <div onClick={(event)=>self.props.onSysUserSelect(data)}>
                {data.firstName + " " +data.lastName}
              </div>
            </td>
          </tr>
        ))
      })
    }

    return content
  }



  render() {
    var self = this;

    return (
      <div className="modal fade" id="UnitSettingAddSysUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="unit-modal-label">管理员</h4>
            </div>
            <div className="modal-body">
              <table className="table table-bordered table-hover">
                <tbody>
                  {this.renderList()}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  // console.log("sys user")

  return {
    data: state.sysUsers.data
  }
}

export default connect(mapStateToProps)(UnitSettingAddSysUser)
